<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>投票详情 - 社交平台</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    body {
      background-color: #f5f5f5;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #333;
      padding-bottom: 70px;
    }
    
    /* 顶部导航 */
    .top-nav {
      background-color: #3498db;
      padding: 15px 15px;
      color: white;
      position: sticky;
      top: 0;
      z-index: 100;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    
    .nav-btn {
      color: white;
      font-size: 20px;
    }
    
    /* 投票主体 */
    .vote-container {
      background-color: white;
      margin-bottom: 10px;
    }
    
    .vote-header {
      padding: 15px;
      border-bottom: 1px solid #f0f0f0;
    }
    
    .vote-creator {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
    }
    
    .creator-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 10px;
    }
    
    .creator-info {
      flex: 1;
    }
    
    .creator-name {
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 2px;
    }
    
    .vote-time {
      font-size: 12px;
      color: #999;
    }
    
    .vote-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 10px;
      line-height: 1.4;
    }
    
    .vote-desc {
      font-size: 15px;
      color: #666;
      line-height: 1.5;
      margin-bottom: 15px;
    }
    
    .vote-meta {
      display: flex;
      font-size: 13px;
      color: #999;
    }
    
    .vote-meta span {
      margin-right: 15px;
      display: flex;
      align-items: center;
    }
    
    .vote-meta i {
      margin-right: 5px;
      font-size: 14px;
    }
    
    /* 投票选项容器 */
    .vote-options {
      padding: 15px;
    }
    
    .vote-type {
      font-size: 14px;
      color: #666;
      margin-bottom: 12px;
      padding-left: 5px;
    }
    
    /* 投票选项样式 */
    .option-text {
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 15px;
      margin-bottom: 12px;
      cursor: pointer;
      transition: all 0.2s ease;
      position: relative;
    }
    
    .option-text.selected {
      border-color: #3498db;
      background-color: #f0f7ff;
    }
    
    .option-single-img {
      border: 1px solid #ddd;
      border-radius: 8px;
      margin-bottom: 12px;
      overflow: hidden;
      cursor: pointer;
    }
    
    .option-single-img.selected {
      border-color: #3498db;
    }
    
    .option-single-img img {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }
    
    .option-multi-img {
      border: 1px solid #ddd;
      border-radius: 8px;
      margin-bottom: 12px;
      padding: 15px;
      cursor: pointer;
    }
    
    .option-multi-img.selected {
      border-color: #3498db;
      background-color: #f0f7ff;
    }
    
    .multi-img-container {
      display: flex;
      gap: 8px;
      margin-bottom: 10px;
      overflow-x: auto;
      padding-bottom: 5px;
    }
    
    .multi-img-container img {
      width: 100px;
      height: 100px;
      border-radius: 6px;
      object-fit: cover;
      flex-shrink: 0;
    }
    
    .option-label {
      font-size: 16px;
      margin-bottom: 5px;
    }
    
    .option-desc {
      font-size: 14px;
      color: #666;
      line-height: 1.4;
    }
    
    /* 投票进度条 */
    .option-progress {
      margin-top: 10px;
    }
    
    .progress-bar-container {
      height: 8px;
      background-color: #f0f0f0;
      border-radius: 4px;
      overflow: hidden;
      margin-bottom: 5px;
    }
    
    .progress-bar {
      height: 100%;
      background-color: #3498db;
      border-radius: 4px;
      transition: width 0.5s ease;
    }
    
    .progress-text {
      display: flex;
      justify-content: space-between;
      font-size: 13px;
      color: #666;
    }
    
    /* 投票按钮 */
    .vote-btn {
      width: 100%;
      padding: 12px 0;
      background-color: #3498db;
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 500;
      margin-top: 5px;
    }
    
    .vote-btn.voted {
      background-color: #2ecc71;
    }
    
    /* 投票操作栏 */
    .vote-actions {
      display: flex;
      justify-content: center;
      gap: 25px;
      padding: 12px 15px;
      border-top: 1px solid #f0f0f0;
      border-bottom: 1px solid #f0f0f0;
    }
    
    .vote-action {
      display: flex;
      align-items: center;
      gap: 6px;
      color: #666;
      font-size: 15px;
      cursor: pointer;
    }
    
    .vote-action i {
      font-size: 18px;
    }
    
    .vote-action.active {
      color: #3498db;
    }
    
    /* 评论区 */
    .comments-section {
      background-color: white;
      padding: 15px;
      margin-bottom: 10px;
    }
    
    .comments-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
    }
    
    .comments-title {
      font-size: 16px;
      font-weight: 600;
    }
    
    .comments-sort {
      color: #666;
      font-size: 14px;
      display: flex;
      align-items: center;
      gap: 5px;
    }
    
    /* 评论输入框 */
    .comment-input-container {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
    }
    
    .user-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      object-fit: cover;
    }
    
    .comment-input-wrapper {
      flex: 1;
    }
    
    .comment-input {
      width: 100%;
      padding: 10px 12px;
      border: 1px solid #ddd;
      border-radius: 20px;
      font-size: 14px;
      resize: none;
      height: 40px;
      outline: none;
    }
    
    .comment-input:focus {
      border-color: #3498db;
    }
    
    .comment-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 8px;
    }
    
    .comment-action-btn {
      color: #666;
      background: none;
      border: none;
      font-size: 18px;
      cursor: pointer;
    }
    
    .send-comment {
      background-color: #3498db;
      color: white;
      border: none;
      border-radius: 15px;
      padding: 5px 15px;
      font-size: 14px;
      cursor: pointer;
    }
    
    /* 评论列表 */
    .comments-list {
      margin-bottom: 15px;
    }
    
    .comment-item {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
    }
    
    .comment-content {
      flex: 1;
    }
    
    .comment-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 5px;
    }
    
    .comment-author {
      font-size: 14px;
      font-weight: 500;
    }
    
    .comment-time {
      font-size: 12px;
      color: #999;
    }
    
    .comment-text {
      font-size: 15px;
      line-height: 1.5;
      margin-bottom: 8px;
      background-color: #f5f5f5;
      padding: 10px 12px;
      border-radius: 15px;
      border-top-left-radius: 4px;
    }
    
    .comment-footer {
      display: flex;
      gap: 15px;
      font-size: 13px;
    }
    
    .comment-action {
      color: #999;
      display: flex;
      align-items: center;
      gap: 5px;
      cursor: pointer;
    }
    
    .comment-action.liked {
      color: #e74c3c;
    }
    
    /* 回复 */
    .replies {
      margin-left: 46px;
      margin-top: 10px;
    }
    
    .reply-item {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
    }
    
    .reply-content {
      flex: 1;
    }
    
    .reply-text {
      font-size: 14px;
      line-height: 1.4;
      margin-bottom: 5px;
      background-color: #f5f5f5;
      padding: 8px 10px;
      border-radius: 12px;
      border-top-left-radius: 4px;
    }
    
    .reply-text .reply-to {
      color: #3498db;
    }
    
    /* 加载更多 */
    .load-more {
      text-align: center;
      padding: 10px 0;
      color: #3498db;
      font-size: 15px;
      cursor: pointer;
    }
    
    /* 底部导航 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: white;
      border-top: 1px solid #eee;
      display: flex;
      padding: 8px 0;
      z-index: 100;
    }
    
    .nav-link {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #999;
      font-size: 10px;
      text-decoration: none;
    }
    
    .nav-link.active {
      color: #3498db;
    }
    
    .nav-icon {
      font-size: 20px;
      margin-bottom: 3px;
    }
    
    /* 投票选择框样式 */
    .option-checkbox, .option-radio {
      position: absolute;
      right: 15px;
      top: 20px;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 2px solid #ddd;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .option-checkbox {
      border-radius: 4px;
    }
    
    .option-checkbox.checked::after, .option-radio.checked::after {
      content: '\f00c';
      font-family: 'FontAwesome';
      font-size: 14px;
      color: white;
    }
    
    .option-checkbox.checked, .option-radio.checked {
      background-color: #3498db;
      border-color: #3498db;
    }
    
    .option-text, .option-multi-img {
      padding-right: 45px;
    }
    
    /* 已选样式 */
    .voted-option .option-checkbox, 
    .voted-option .option-radio {
      background-color: #3498db;
      border-color: #3498db;
    }
    
    .voted-option .option-checkbox::after, 
    .voted-option .option-radio::after {
      content: '\f00c';
      font-family: 'FontAwesome';
      font-size: 14px;
      color: white;
    }
  </style>
</head>
<body>
  <!-- 顶部导航 -->
  <div class="top-nav">
    <button class="btn btn-link p-0 nav-btn" onclick="history.back()">
      <i class="fa fa-arrow-left"></i>
    </button>
    <h1 class="nav-title">投票详情</h1>
    <button class="btn btn-link p-0 nav-btn" id="shareBtn">
      <i class="fa fa-share-alt"></i>
    </button>
  </div>
  
  <!-- 投票主体 -->
  <div class="vote-container">
    <div class="vote-header">
      <div class="vote-creator">
        <img src="https://picsum.photos/100/100?random=1" alt="用户头像" class="creator-avatar">
        <div class="creator-info">
          <div class="creator-name">城市美食家</div>
          <div class="vote-time">2023-06-15 14:30 · 剩余1天8小时</div>
        </div>
        <button class="btn btn-sm btn-outline-primary">关注</button>
      </div>
      
      <div class="vote-title">周末公司聚餐，推荐哪家餐厅最合适？</div>
      
      <div class="vote-desc">
        公司团队30人左右周末聚餐，人均预算150-200元，希望环境好一点，有包间，交通便利。大家帮忙推荐一下，谢谢！
      </div>
      
      <div class="vote-meta">
        <span><i class="fa fa-users"></i> 238人参与</span>
        <span><i class="fa fa-comment-o"></i> 86条评论</span>
        <span><i class="fa fa-star-o"></i> 124人收藏</span>
      </div>
    </div>
    
    <div class="vote-options">
      <div class="vote-type">多选投票（最多选3项）</div>
      
      <!-- 选项1 -->
      <div class="option-single-img" onclick="selectOption(this, true)">
        <img src="https://picsum.photos/800/400?random=10" alt="餐厅图片">
        <div class="option-info" style="padding: 12px 15px 12px 15px;">
          <div class="option-label">青竹湘菜馆</div>
          <div class="option-desc">正宗湖南菜，有30人包间，地铁3号线直达，人均160元左右</div>
          <div class="option-progress">
            <div class="progress-bar-container">
              <div class="progress-bar" style="width: 42%;"></div>
            </div>
            <div class="progress-text">
              <span>42%</span>
              <span>100票</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 选项2 -->
      <div class="option-single-img" onclick="selectOption(this, true)">
        <img src="https://picsum.photos/800/400?random=11" alt="餐厅图片">
        <div class="option-info" style="padding: 12px 15px;">
          <div class="option-label">海岸西餐厅</div>
          <div class="option-desc">牛排和披萨为主，环境优雅，有两个15人包间可打通，人均180元</div>
          <div class="option-progress">
            <div class="progress-bar-container">
              <div class="progress-bar" style="width: 28%;"></div>
            </div>
            <div class="progress-text">
              <span>28%</span>
              <span>66票</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 选项3 -->
      <div class="option-single-img" onclick="selectOption(this, true)">
        <img src="https://picsum.photos/800/400?random=12" alt="餐厅图片">
        <div class="option-info" style="padding: 12px 15px;">
          <div class="option-label">川味坊</div>
          <div class="option-desc">正宗川菜，有大型宴会厅，适合团队聚餐，人均150元</div>
          <div class="option-progress">
            <div class="progress-bar-container">
              <div class="progress-bar" style="width: 30%;"></div>
            </div>
            <div class="progress-text">
              <span>30%</span>
              <span>72票</span>
            </div>
          </div>
        </div>
      </div>
      
      <button class="vote-btn" id="voteBtn" onclick="submitVote()">提交投票</button>
    </div>
    
    <div class="vote-actions">
      <div class="vote-action" onclick="toggleLike(this)">
        <i class="fa fa-thumbs-o-up"></i>
        <span>点赞 (156)</span>
      </div>
      <div class="vote-action" onclick="toggleFavorite(this)">
        <i class="fa fa-bookmark-o"></i>
        <span>收藏</span>
      </div>
      <div class="vote-action" onclick="showSharePanel()">
        <i class="fa fa-share-alt"></i>
        <span>分享</span>
      </div>
      <div class="vote-action" onclick="reportVote()">
        <i class="fa fa-flag-o"></i>
        <span>举报</span>
      </div>
    </div>
  </div>
  
  <!-- 评论区 -->
  <div class="comments-section">
    <div class="comments-header">
      <div class="comments-title">评论 (86)</div>
      <div class="comments-sort">
        <span>最新</span>
        <i class="fa fa-chevron-down"></i>
      </div>
    </div>
    
    <!-- 评论输入框 -->
    <div class="comment-input-container">
      <img src="https://picsum.photos/100/100?random=99" alt="用户头像" class="user-avatar">
      <div class="comment-input-wrapper">
        <textarea class="comment-input" placeholder="发表你的看法..."></textarea>
        <div class="comment-actions">
          <button class="comment-action-btn"><i class="fa fa-image"></i></button>
          <button class="comment-action-btn"><i class="fa fa-smile-o"></i></button>
          <button class="send-comment">发送</button>
        </div>
      </div>
    </div>
    
    <!-- 评论列表 -->
    <div class="comments-list">
      <!-- 评论1 -->
      <div class="comment-item">
        <img src="https://picsum.photos/100/100?random=5" alt="用户头像" class="user-avatar">
        <div class="comment-content">
          <div class="comment-header">
            <div class="comment-author">美食探店达人</div>
            <div class="comment-time">2小时前</div>
          </div>
          <div class="comment-text">
            推荐青竹湘菜馆，上周我们部门刚去过，环境不错，包间很大，而且他们的剁椒鱼头真的超级好吃，值得一试！
          </div>
          <div class="comment-footer">
            <div class="comment-action" onclick="likeComment(this)">
              <i class="fa fa-thumbs-o-up"></i>
              <span>32</span>
            </div>
            <div class="comment-action" onclick="replyToComment(this, '美食探店达人')">
              <i class="fa fa-reply"></i>
              <span>回复</span>
            </div>
          </div>
          
          <!-- 回复 -->
          <div class="replies">
            <div class="reply-item">
              <img src="https://picsum.photos/100/100?random=6" alt="用户头像" class="user-avatar">
              <div class="reply-content">
                <div class="comment-header">
                  <div class="comment-author">公司行政小李</div>
                  <div class="comment-time">1小时前</div>
                </div>
                <div class="reply-text">
                  <span class="reply-to">@美食探店达人</span> 请问那里好停车吗？我们有几辆车要过去
                </div>
                <div class="comment-footer">
                  <div class="comment-action" onclick="likeComment(this)">
                    <i class="fa fa-thumbs-o-up"></i>
                    <span>8</span>
                  </div>
                  <div class="comment-action" onclick="replyToComment(this, '公司行政小李')">
                    <i class="fa fa-reply"></i>
                    <span>回复</span>
                  </div>
                </div>
              </div>
            </div>
            
            <div class="reply-item">
              <img src="https://picsum.photos/100/100?random=5" alt="用户头像" class="user-avatar">
              <div class="reply-content">
                <div class="comment-header">
                  <div class="comment-author">美食探店达人</div>
                  <div class="comment-time">45分钟前</div>
                </div>
                <div class="reply-text">
                  <span class="reply-to">@公司行政小李</span> 有停车场的，我们当时停了5辆车没问题
                </div>
                <div class="comment-footer">
                  <div class="comment-action" onclick="likeComment(this)">
                    <i class="fa fa-thumbs-o-up"></i>
                    <span>5</span>
                  </div>
                  <div class="comment-action" onclick="replyToComment(this, '美食探店达人')">
                    <i class="fa fa-reply"></i>
                    <span>回复</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 评论2 -->
      <div class="comment-item">
        <img src="https://picsum.photos/100/100?random=7" alt="用户头像" class="user-avatar">
        <div class="comment-content">
          <div class="comment-header">
            <div class="comment-author">爱吃辣的小张</div>
            <div class="comment-time">5小时前</div>
          </div>
          <div class="comment-text">
            川味坊也不错啊，他们的毛血旺做得很正宗，而且有一个能容纳40人的大包间，很适合团队聚餐
          </div>
          <div class="comment-footer">
            <div class="comment-action" onclick="likeComment(this)">
              <i class="fa fa-thumbs-o-up"></i>
              <span>18</span>
            </div>
            <div class="comment-action" onclick="replyToComment(this, '爱吃辣的小张')">
              <i class="fa fa-reply"></i>
              <span>回复</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 评论3 -->
      <div class="comment-item">
        <img src="https://picsum.photos/100/100?random=8" alt="用户头像" class="user-avatar">
        <div class="comment-content">
          <div class="comment-header">
            <div class="comment-author">素食主义者</div>
            <div class="comment-time">昨天 20:30</div>
          </div>
          <div class="comment-text">
            有没有素食选择多一点的餐厅推荐啊？我们团队有几位素食者
          </div>
          <div class="comment-footer">
            <div class="comment-action" onclick="likeComment(this)">
              <i class="fa fa-thumbs-o-up"></i>
              <span>7</span>
            </div>
            <div class="comment-action" onclick="replyToComment(this, '素食主义者')">
              <i class="fa fa-reply"></i>
              <span>回复</span>
            </div>
          </div>
          
          <!-- 回复 -->
          <div class="replies">
            <div class="reply-item">
              <img src="https://picsum.photos/100/100?random=1" alt="用户头像" class="user-avatar">
              <div class="reply-content">
                <div class="comment-header">
                  <div class="comment-author">城市美食家</div>
                  <div class="comment-time">昨天 21:15</div>
                </div>
                <div class="reply-text">
                  <span class="reply-to">@素食主义者</span> 海岸西餐厅有专门的素食套餐，选择还挺多的
                </div>
                <div class="comment-footer">
                  <div class="comment-action" onclick="likeComment(this)">
                    <i class="fa fa-thumbs-o-up"></i>
                    <span>12</span>
                  </div>
                  <div class="comment-action" onclick="replyToComment(this, '城市美食家')">
                    <i class="fa fa-reply"></i>
                    <span>回复</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 加载更多 -->
    <div class="load-more" onclick="loadMoreComments()">
      加载更多评论
    </div>
  </div>
  
  <!-- 底部导航 -->
  <div class="bottom-nav">
    <a href="#" class="nav-link">
      <i class="fa fa-home nav-icon"></i>
      <span>首页</span>
    </a>
    <a href="#" class="nav-link">
      <i class="fa fa-calendar nav-icon"></i>
      <span>活动</span>
    </a>
    <a href="#" class="nav-link active">
      <i class="fa fa-bar-chart nav-icon"></i>
      <span>投票</span>
    </a>
    <a href="#" class="nav-link">
      <i class="fa fa-comments nav-icon"></i>
      <span>消息</span>
    </a>
    <a href="#" class="nav-link">
      <i class="fa fa-user-o nav-icon"></i>
      <span>我的</span>
    </a>
  </div>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 选择投票选项
    function selectOption(option, isMultiple) {
      // 如果是已投票状态，不允许再次选择
      if (document.getElementById('voteBtn').classList.contains('voted')) {
        return;
      }
      
      // 单选逻辑
      if (!isMultiple) {
        // 清除同组其他选项的选中状态
        const siblings = option.parentElement.querySelectorAll('.option-text, .option-single-img, .option-multi-img');
        siblings.forEach(sib => {
          sib.classList.remove('selected');
          const radio = sib.querySelector('.option-radio');
          if (radio) radio.remove();
        });
        
        // 设置当前选项为选中状态
        option.classList.add('selected');
        if (!option.querySelector('.option-radio')) {
          const radio = document.createElement('div');
          radio.className = 'option-radio checked';
          option.querySelector('.option-info').appendChild(radio);
        }
      } 
      // 多选逻辑
      else {
        option.classList.toggle('selected');
        
        // 处理复选框状态
        let checkbox = option.querySelector('.option-checkbox');
        if (!checkbox) {
          checkbox = document.createElement('div');
          checkbox.className = 'option-checkbox';
          option.querySelector('.option-info').appendChild(checkbox);
        }
        
        checkbox.classList.toggle('checked');
        
        // 检查选中数量是否超过限制
        const maxSelect = 3;
        const selectedCount = document.querySelectorAll('.option-single-img.selected').length;
        
        // 禁用/启用未选中的选项
        const options = document.querySelectorAll('.option-single-img');
        options.forEach(opt => {
          if (!opt.classList.contains('selected') && selectedCount >= maxSelect) {
            opt.style.opacity = '0.6';
            opt.style.pointerEvents = 'none';
          } else {
            opt.style.opacity = '1';
            opt.style.pointerEvents = 'auto';
          }
        });
      }
    }
    
    // 提交投票
    function submitVote() {
      const selectedOptions = document.querySelectorAll('.option-single-img.selected');
      
      if (selectedOptions.length === 0) {
        alert('请至少选择一个选项');
        return;
      }
      
      // 更改按钮状态
      const voteBtn = document.getElementById('voteBtn');
      voteBtn.textContent = '已投票';
      voteBtn.classList.add('voted');
      
      // 更新投票进度（模拟）
      selectedOptions.forEach(option => {
        const progressBar = option.querySelector('.progress-bar');
        const currentWidth = parseInt(progressBar.style.width);
        const newWidth = Math.min(100, currentWidth + 1); // 模拟增加1%
        progressBar.style.width = newWidth + '%';
        
        // 更新百分比文本
        const progressText = option.querySelector('.progress-text');
        if (progressText) {
          const percentSpan = progressText.querySelector('span:first-child');
          percentSpan.textContent = newWidth + '%';
          
          // 更新票数
          const voteCountSpan = progressText.querySelector('span:last-child');
          const count = parseInt(voteCountSpan.textContent);
          voteCountSpan.textContent = (count + 1) + '票';
        }
      });
      
      // 更新参与人数
      const participantsEl = document.querySelector('.vote-meta span:first-child');
      if (participantsEl) {
        const count = parseInt(participantsEl.textContent.match(/\d+/)[0]);
        participantsEl.innerHTML = `<i class="fa fa-users"></i> ${count + 1}人参与`;
      }
      
      alert('投票成功！');
    }
    
    // 点赞功能
    function toggleLike(el) {
      const icon = el.querySelector('i');
      const countEl = el.querySelector('span');
      let count = parseInt(countEl.textContent.match(/\d+/)[0]);
      
      if (icon.classList.contains('fa-thumbs-o-up')) {
        icon.classList.remove('fa-thumbs-o-up');
        icon.classList.add('fa-thumbs-up');
        el.classList.add('active');
        countEl.textContent = `点赞 (${count + 1})`;
      } else {
        icon.classList.remove('fa-thumbs-up');
        icon.classList.add('fa-thumbs-o-up');
        el.classList.remove('active');
        countEl.textContent = `点赞 (${count - 1})`;
      }
    }
    
    // 收藏功能
    function toggleFavorite(el) {
      const icon = el.querySelector('i');
      const text = el.querySelector('span');
      
      if (icon.classList.contains('fa-bookmark-o')) {
        icon.classList.remove('fa-bookmark-o');
        icon.classList.add('fa-bookmark');
        el.classList.add('active');
        text.textContent = '已收藏';
        alert('收藏成功');
      } else {
        icon.classList.remove('fa-bookmark');
        icon.classList.add('fa-bookmark-o');
        el.classList.remove('active');
        text.textContent = '收藏';
        alert('已取消收藏');
      }
    }
    
    // 分享功能
    function showSharePanel() {
      const shareOptions = ['微信好友', '朋友圈', 'QQ好友', '微博', '复制链接'];
      let shareHtml = '<div style="padding: 15px;"><h3 style="font-size: 16px; margin-bottom: 15px;">分享到</h3><div style="display: flex; flex-wrap: wrap; gap: 15px;">';
      
      shareOptions.forEach(option => {
        shareHtml += `
          <div style="display: flex; flex-direction: column; align-items: center; width: 20%;">
            <div style="width: 40px; height: 40px; background-color: #f5f5f5; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 5px;">
              <i class="fa fa-share-alt" style="color: #3498db;"></i>
            </div>
            <span style="font-size: 12px;">${option}</span>
          </div>
        `;
      });
      
      shareHtml += '</div></div><div style="padding: 10px; border-top: 1px solid #eee;"><button id="cancelShare" style="width: 100%; padding: 10px; background: none; border: 1px solid #ddd; border-radius: 5px; font-size: 16px;">取消</button></div>';
      
      // 创建分享面板
      const sharePanel = document.createElement('div');
      sharePanel.id = 'sharePanel';
      sharePanel.style.position = 'fixed';
      sharePanel.style.bottom = '0';
      sharePanel.style.left = '0';
      sharePanel.style.right = '0';
      sharePanel.style.backgroundColor = 'white';
      sharePanel.style.borderTopLeftRadius = '15px';
      sharePanel.style.borderTopRightRadius = '15px';
      sharePanel.style.zIndex = '1000';
      sharePanel.innerHTML = shareHtml;
      
      // 创建遮罩层
      const overlay = document.createElement('div');
      overlay.id = 'shareOverlay';
      overlay.style.position = 'fixed';
      overlay.style.top = '0';
      overlay.style.left = '0';
      overlay.style.right = '0';
      overlay.style.bottom = '0';
      overlay.style.backgroundColor = 'rgba(0,0,0,0.5)';
      overlay.style.zIndex = '999';
      
      document.body.appendChild(overlay);
      document.body.appendChild(sharePanel);
      
      // 取消分享
      document.getElementById('cancelShare').addEventListener('click', () => {
        document.getElementById('sharePanel').remove();
        document.getElementById('shareOverlay').remove();
      });
      
      // 点击遮罩层关闭
      overlay.addEventListener('click', () => {
        document.getElementById('sharePanel').remove();
        document.getElementById('shareOverlay').remove();
      });
    }
    
    // 举报功能
    function reportVote() {
      const reasons = ['内容违规', '垃圾广告', '重复发布', '其他原因'];
      let reportHtml = '<div style="padding: 15px;"><h3 style="font-size: 16px; margin-bottom: 15px;">举报原因</h3><div style="display: flex; flex-direction: column; gap: 10px;">';
      
      reasons.forEach(reason => {
        reportHtml += `
          <div style="padding: 12px; border: 1px solid #ddd; border-radius: 8px; cursor: pointer;">${reason}</div>
        `;
      });
      
      reportHtml += '</div></div><div style="padding: 10px; border-top: 1px solid #eee; display: flex; gap: 10px;"><button id="cancelReport" style="flex: 1; padding: 10px; background: none; border: 1px solid #ddd; border-radius: 5px; font-size: 16px;">取消</button><button id="confirmReport" style="flex: 1; padding: 10px; background-color: #e74c3c; color: white; border: none; border-radius: 5px; font-size: 16px;">确认举报</button></div>';
      
      // 创建举报面板
      const reportPanel = document.createElement('div');
      reportPanel.id = 'reportPanel';
      reportPanel.style.position = 'fixed';
      reportPanel.style.bottom = '0';
      reportPanel.style.left = '0';
      reportPanel.style.right = '0';
      reportPanel.style.backgroundColor = 'white';
      reportPanel.style.borderTopLeftRadius = '15px';
      reportPanel.style.borderTopRightRadius = '15px';
      reportPanel.style.zIndex = '1000';
      reportPanel.innerHTML = reportHtml;
      
      // 创建遮罩层
      const overlay = document.createElement('div');
      overlay.id = 'reportOverlay';
      overlay.style.position = 'fixed';
      overlay.style.top = '0';
      overlay.style.left = '0';
      overlay.style.right = '0';
      overlay.style.bottom = '0';
      overlay.style.backgroundColor = 'rgba(0,0,0,0.5)';
      overlay.style.zIndex = '999';
      
      document.body.appendChild(overlay);
      document.body.appendChild(reportPanel);
      
      // 取消举报
      document.getElementById('cancelReport').addEventListener('click', () => {
        document.getElementById('reportPanel').remove();
        document.getElementById('reportOverlay').remove();
      });
      
      // 确认举报
      document.getElementById('confirmReport').addEventListener('click', () => {
        alert('举报已提交，我们会尽快处理');
        document.getElementById('reportPanel').remove();
        document.getElementById('reportOverlay').remove();
      });
      
      // 点击遮罩层关闭
      overlay.addEventListener('click', () => {
        document.getElementById('reportPanel').remove();
        document.getElementById('reportOverlay').remove();
      });
      
      // 选择举报原因
      reportPanel.querySelectorAll('div[style*="padding: 12px"]').forEach(item => {
        item.addEventListener('click', function() {
          reportPanel.querySelectorAll('div[style*="padding: 12px"]').forEach(i => {
            i.style.borderColor = '#ddd';
            i.style.backgroundColor = 'white';
          });
          this.style.borderColor = '#3498db';
          this.style.backgroundColor = '#f0f7ff';
        });
      });
    }
    
    // 评论点赞
    function likeComment(el) {
      const icon = el.querySelector('i');
      const countEl = el.querySelector('span');
      let count = parseInt(countEl.textContent);
      
      if (icon.classList.contains('fa-thumbs-o-up')) {
        icon.classList.remove('fa-thumbs-o-up');
        icon.classList.add('fa-thumbs-up');
        el.classList.add('liked');
        countEl.textContent = count + 1;
      } else {
        icon.classList.remove('fa-thumbs-up');
        icon.classList.add('fa-thumbs-o-up');
        el.classList.remove('liked');
        countEl.textContent = count - 1;
      }
    }
    
    // 回复评论
    function replyToComment(el, author) {
      const commentInput = document.querySelector('.comment-input');
      commentInput.focus();
      commentInput.value = `@${author} `;
      commentInput.style.height = 'auto';
      commentInput.style.height = (commentInput.scrollHeight > 100 ? 100 : commentInput.scrollHeight) + 'px';
    }
    
    // 加载更多评论
    function loadMoreComments() {
      const loadMoreEl = document.querySelector('.load-more');
      loadMoreEl.innerHTML = '<i class="fa fa-spinner fa-spin"></i> 加载中...';
      
      // 模拟加载延迟
      setTimeout(() => {
        const commentsList = document.querySelector('.comments-list');
        
        // 添加新评论
        const newComment = `
          <div class="comment-item">
            <img src="https://picsum.photos/100/100?random=15" alt="用户头像" class="user-avatar">
            <div class="comment-content">
              <div class="comment-header">
                <div class="comment-author">团队经理老王</div>
                <div class="comment-time">3天前</div>
              </div>
              <div class="comment-text">
                海岸西餐厅我去过，服务很好，而且有投影设备，我们上次聚餐还搞了个小型颁奖仪式，效果不错
              </div>
              <div class="comment-footer">
                <div class="comment-action" onclick="likeComment(this)">
                  <i class="fa fa-thumbs-o-up"></i>
                  <span>24</span>
                </div>
                <div class="comment-action" onclick="replyToComment(this, '团队经理老王')">
                  <i class="fa fa-reply"></i>
                  <span>回复</span>
                </div>
              </div>
            </div>
          </div>
        `;
        
        commentsList.insertAdjacentHTML('beforeend', newComment);
        loadMoreEl.textContent = '加载更多评论';
      }, 1500);
    }
    
    // 评论输入框自适应高度
    document.querySelector('.comment-input').addEventListener('input', function() {
      this.style.height = 'auto';
      this.style.height = (this.scrollHeight > 100 ? 100 : this.scrollHeight) + 'px';
    });
    
    // 发送评论
    document.querySelector('.send-comment').addEventListener('click', function() {
      const commentInput = document.querySelector('.comment-input');
      const commentText = commentInput.value.trim();
      
      if (commentText === '') {
        alert('请输入评论内容');
        return;
      }
      
      // 添加新评论
      const commentsList = document.querySelector('.comments-list');
      const newComment = `
        <div class="comment-item">
          <img src="https://picsum.photos/100/100?random=99" alt="用户头像" class="user-avatar">
          <div class="comment-content">
            <div class="comment-header">
              <div class="comment-author">我</div>
              <div class="comment-time">刚刚</div>
            </div>
            <div class="comment-text">
              ${commentText}
            </div>
            <div class="comment-footer">
              <div class="comment-action" onclick="likeComment(this)">
                <i class="fa fa-thumbs-o-up"></i>
                <span>0</span>
              </div>
              <div class="comment-action" onclick="replyToComment(this, '我')">
                <i class="fa fa-reply"></i>
                <span>回复</span>
              </div>
            </div>
          </div>
        </div>
      `;
      
      commentsList.insertAdjacentHTML('afterbegin', newComment);
      
      // 清空输入框
      commentInput.value = '';
      commentInput.style.height = '40px';
      
      // 更新评论数
      const commentsTitle = document.querySelector('.comments-title');
      const count = parseInt(commentsTitle.textContent.match(/\d+/)[0]);
      commentsTitle.textContent = `评论 (${count + 1})`;
    });
    
    // 分享按钮
    document.getElementById('shareBtn').addEventListener('click', showSharePanel);
  </script>
</body>
</html>
